<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <script>
      // // 1. 查询用户，查询成功说明可以登录
      // // 2. 查询用户成功，查询科目
      // // 3. 根据科目的查询结果，获取去成绩
      // $.ajax({
      //   url: "mock/user.json",
      //   success(data) {
      //     console.log("查询用户：", data);
      //     console.log("id:", JSON.parse(data).id);
      //     $.ajax({
      //       url: `mock/user_corse_${JSON.parse(data).id}.json`,
      //       success(data) {
      //         console.log("查询到课程：", data);
      //         $.ajax({
      //           url: `mock/corse_score_${JSON.parse(data).id}.json`,
      //           success(data) {
      //             console.log("查询到分数：", data);
      //           },
      //           error(error) {
      //             console.log("出现异常了：" + error);
      //           },
      //         });
      //       },
      //       error(error) {
      //         console.log("出现异常了：" + error);
      //       },
      //     });
      //   },
      //   error(error) {
      //     console.log("出现异常了：" + error);
      //   },
      // });

      // console.log("==============promise改造===============");
      // //基本流程
      // let promise = new Promise(function (resolve, reject) {
      //   // 执行异步操作.....

      //   if (true) {
      //     //异步操作成功
      //     resolve("执行成功"); //// 调用 resolve，代表 Promise 将返回成功的结果
      //   } else {
      //     reject("执行失败");
      //   }
      // });

      // promise
      //   .then(function (data) {
      //     // 异步执行成功后的回调
      //     console.log(data);
      //   })
      //   .catch(function (err) {
      //     // 异步执行失败后的回调
      //     console.log(err);
      //   });

      // console.log("==============promise-箭头函数改造===============");
      // // 箭头函数改造
      // let promise2 = new Promise((resolve, reject) => {
      //   // 执行异步操作.....

      //   if (true) {
      //     //异步操作成功
      //     resolve("执行成功"); //// 调用 resolve，代表 Promise 将返回成功的结果
      //   } else {
      //     reject("执行失败");
      //   }
      // });

      // promise2
      //   .then((data) => {
      //     // 异步执行成功后的回调
      //     console.log(data);
      //   })
      //   .catch((err) => {
      //     // 异步执行失败后的回调
      //     console.log(err);
      //   });

      // console.log("==============promise改造案例===============");
      // // 1. 查询用户，查询成功说明可以登录
      // // 2. 查询用户成功，查询科目
      // // 3. 根据科目的查询结果，获取去成绩

      // let promise3 = new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: "mock/user.json",
      //     success(data) {
      //       console.log("查询到用户：", data);
      //       resolve(data);
      //     },
      //     error(err) {
      //       console.log("查询用户失败：", err);
      //       reject(err);
      //     },
      //   });
      // })
      //   .then((data) => {
      //     return new Promise((resolve, reject) => {
      //       $.ajax({
      //         url: `mock/user_corse_${JSON.parse(data).id}.json`,
      //         success(data) {
      //           console.log("查询到课程：", data);
      //           resolve(data);
      //         },
      //         error(err) {
      //           console.log("查询课程失败：", err);
      //           reject(err);
      //         },
      //       });
      //     });
      //   })
      //   .then((data) => {
      //     $.ajax({
      //       url: `mock/corse_score_${JSON.parse(data).id}.json`,
      //       success(data) {
      //         console.log("查询到分数：", data);
      //       },
      //       error(err) {
      //         console.log("查询分数失败：", err);
      //       },
      //     });
      //   });

      console.log(
        "==============promise优化处理，封装成通用方法==============="
      );

      //通常在企业开发中，会把 promise 封装成通用方法，如下：封装了一个通用的 get 请求方法；
      let get = function (url, data) {
        return new Promise((resolve, reject) => {
          $.ajax({
            url: url,
            data: data,
            type: "GET",
            success(data) {
              resolve(data);
            },
            error(err) {
              reject(err);
            },
          });
        });
      };

      // 使用封装的 get 方法，实现查询分数
      get("mock/user.json")
        .then((data) => {
          console.log("查询到用户：", data);
          return get(`mock/user_corse_${JSON.parse(data).id}.json`);
        })
        .then((data) => {
          console.log("查询到课程：", data);
          return get(`mock/corse_score_${JSON.parse(data).id}.json`);
        })
        .then((data) => {
          console.log("查询到分数：", data);
        }).catch((err)=>{
          console.log("处理异常");
        });
    </script>
  </body>
</html>
